<html>
  <head>
    <title>SIMILE Widgets | Timeline | Examples | Religion Timelines</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />

    <script src="../../api/lib/require.js" type="text/javascript"></script>
    <script>
require(["../../api/configs/local-config"], function() {
    require(["timeline", "../examples.js", "jquery"], function(Timeline, Helpers, $) {
        var tl;
        var onLoad = function() {
            var eventSourceJewish = new Timeline.DefaultEventSource(0);
            var eventSourceChristianity = new Timeline.DefaultEventSource(0);
            
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 320;
            theme.ether.backgroundColors = [
                "#D1CECA",
                "#E7DFD6",
                "#E8E8F4",
                "#D0D0E8"
            ];
            
            var zones = [
                {   start:    "0",
                    end:      "2100",
                    magnify:  15,
                    unit:     Timeline.DateTime.DECADE
                },
                {   start:    "1800",
                    end:      "2100",
                    magnify:  3,
                    unit:     Timeline.DateTime.YEAR,
                    multiple: 1
                }
            ];
            var zones2 = [
                {   start:    "0",
                    end:      "2100",
                    magnify:  5,
                    unit:     Timeline.DateTime.DECADE
                },
                {   start:    "1800",
                    end:      "2100",
                    magnify:  3,
                    unit:     Timeline.DateTime.YEAR,
                    multiple: 10
                }
            ];
            
            var d = Timeline.DateTime.parseGregorianDateTime("0");
            var bandInfos = [
                Timeline.createHotZoneBandInfo({
                    width:          "7%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 70,
                    zones:          zones2,
                    eventSource:    eventSourceJewish,
                    date:           d,
                    overview:       true,
                    theme:          theme
                }),
                Timeline.createHotZoneBandInfo({
                    width:          "32%",
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 250,
                    zones:          zones,
                    eventSource:    eventSourceJewish,
                    date:           d,
                    timeZone:       -6,
                    theme:          theme
                }),
                Timeline.createHotZoneBandInfo({
                    width:          "54%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 250,
                    zones:          zones,
                    eventSource:    eventSourceChristianity,
                    date:           d,
                    timeZone:       -6,
                    theme:          theme
                }),
                Timeline.createHotZoneBandInfo({
                    width:          "7%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 70,
                    zones:          zones2,
                    eventSource:    eventSourceChristianity,
                    date:           d,
                    overview:       true,
                    theme:          theme
                })
            ];
            bandInfos[0].syncWith = 1;
            bandInfos[0].highlight = true;
            
            bandInfos[2].syncWith = 1;
            bandInfos[3].syncWith = 2;
            bandInfos[3].highlight = true;
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML("jewish.xml", function(xml, url) {
                eventSourceJewish.loadXML(xml, url);
                document.getElementById("jewish-event-count").innerHTML = eventSourceJewish.getCount();
            });
            tl.loadXML("christianity.xml", function(xml, url) {
                eventSourceChristianity.loadXML(xml, url);
                document.getElementById("christianity-event-count").innerHTML = eventSourceChristianity.getCount();
            });
            
            Timeline.writeVersion('tl_ver');
            Helpers.setupFilterHighlightControls(document.getElementById("jewish-controls"), tl, [0,1], theme);
            Helpers.setupFilterHighlightControls(document.getElementById("christianity-controls"), tl, [2,3], theme);
        };

        window.centerTimeline = function(year) {
            tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1));
        };


        var resizeTimerID = null;
        var onResize = function() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        };

        $(document).ready(onLoad);
        document.onresize = onResize;
    });
});
    </script>
  </head>
  <body>
    <ul id="path">
      <li><a href="/" title="Home">SIMILE Widgets</a></li>
      <li><a href="../../" title="Timeline">Timeline</a></li>
      <li><a href="../" title="Examples">Examples</a></li>
      <li><span>Religion Timelines</span></li>
    </ul>
  
    <div id="header">
      <h1>Religion Timelines: Jewish History + Christianity History</h1>
    </div>
  
    <div id="content">
      <p>Sources:
          <a href="http://en.wikipedia.org/wiki/Timeline_of_Jewish_history">Timeline of Jewish history (Wikipedia)</a>,
          <a href="http://en.wikipedia.org/wiki/Timeline_of_Christianity">Timeline of Christianity</a>.
          The Jewish timeline (top) contains <span id="jewish-event-count"></span> events while 
          the Christianity timeline contains <span id="christianity-event-count"></span> events.
          Titles of events have been phrased by David Huynh, author of this timeline example.
          The phrasing might not be of journalistic quality. The information in this example
          should not be used as an official source.
      </p>
      <p>Timeline version <span id='tl_ver'></span>.</p>
      <div style="width: 100%">
          <table style="text-align: center; width: 100%">
              <tr>
                  <td><a href="javascript:centerTimeline(1);">1 AD</a></td>
                  <td><a href="javascript:centerTimeline(250);">250 AD</a></td>
                  <td><a href="javascript:centerTimeline(500);">500 AD</a></td>
                  <td><a href="javascript:centerTimeline(750);">750 AD</a></td>
                  <td><a href="javascript:centerTimeline(1000);">1000 AD</a></td>
                  <td><a href="javascript:centerTimeline(1250);">1250 AD</a></td>
                  <td><a href="javascript:centerTimeline(1500);">1500 AD</a></td>
                  <td><a href="javascript:centerTimeline(1750);">1750 AD</a></td>
                  <td><a href="javascript:centerTimeline(2000);">2000 AD</a></td>
              </tr>
          </table>
      </div>
    
      <div class="controls" id="jewish-controls"></div>
      
      <div id="tl" class="timeline-default" style="height: 800px"></div>
      
      <div class="controls" id="christianity-controls"></div>
    </div>
    
    <div id="footer">
      Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved
    </div>
  </body>
</html>
